<!--
 * @Author: DeluxePig
 * @LastEditors: DeluxePig 250293786@qq.com
 * @Date: 2024-06-16 13:52:40
 * @LastEditTime: 2024-07-02 22:46:47
 * @Description: 我的关注——分页
-->

<template>
  <div class="page-contain-box flex justify-between">
    <div class="tips text-#00000099 text-12 line-height-32">
      共
      <span>{{ pagination.total }}</span>
      条
    </div>

    <el-pagination background :current-page.sync="pagination.currentPage" :page-sizes="pageSizes"
      :page-size="pagination.pageSize" layout="sizes, prev, pager, next" :total="pagination.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    paginationData: {
      type: Object,
      default: function () {
        return {
          currentPage: 1,
          pageSize: 9,
          total: 0
        }
      }
    },
    pageSizes: {
      type: Array,
      default: function () {
        return [9, 10, 20, 30]
      }
    }
  },
  data() {
    return {
      pagination: {
        currentPage: 1,
        pageSize: 9,
        total: 0
      }
    }
  },
  watch: {
    paginationData: {
      handler(nv, oldName) {
        this.pagination = nv
      },
      immediate: true,
      deep: true
    }
  },
  created() { },
  methods: {
    handleSizeChange(val) {
      console.log(11, val)
      this.pagination.pageSize = val
      this.$emit('paginationFun', this.pagination)
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.$emit('paginationFun', this.pagination)
    }
  }
}
</script>
<style lang="scss" scoped>
.page-contain-box {
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
</style>
